import React, {Component} from 'react'
import {Card,Table,Button,Icon,Modal, message} from 'antd'
import {reqCategories,reqAddCategory,reqModifyCategory,reqGetCategory} from '../../api'
import LinkButton from '../../components/link-button'
import ModifyForm from './modifyForm'
import AddForm from './addForm'
/*
分类管理路由组件
 */
export default class Category extends Component {

  state = {
    categories: [],
    subCategories: [],
    parentId: '0',
    parentName: '',
    loading: false
  }

  getCategories = async (parentId)=>{
    this.setState({
      loading:true
    })
    parentId = parentId || this.state.parentId
    const result = await reqCategories(parentId)
    this.setState({
      loading:false
    })
    if(result.status===0){
      const categories = result.data
      if(parentId==='0'){
        this.setState({
          categories
        })
      }else{
        this.setState({
          subCategories: categories
        })
      }
    }else{
      message.error('Faied to get Categories')
    }
  }
  showSubCategories =(category)=>{
     this.setState({
       parentId: category._id,
       parentName : category.name
     },()=>{
       this.getCategories()
     })
  }
  
  showCategories=()=>{
    this.setState({
        parentId: '0',
        parentName: '',
        subCategories: [],
        modalStatus: 0 //0隐藏 ，1显示add， 2显示modify
      })
  }
  addaCategory= async()=>{
    const {categoryName,parentId} = this.form.getFieldsValue()

    this.setState({
      modalStatus: 0
    })

    this.form.resetFields()
    const result = await reqAddCategory({categoryName,parentId})
    if(result.status===0){
      if(parentId==='0' || parentId===this.state.parentId){
        this.getCategories(parentId)
      }
    }
  }
  modifyCategory= async()=>{
    const categoryId = this.category._id
    const {categoryName} = this.form.getFieldsValue()

    this.setState({
      modalStatus: 0
    })

    this.form.resetFields()

    const result = await reqModifyCategory({categoryId,categoryName})
    if(result.status===0){
      this.getCategories()
    }
  }
  showAddCategory=()=>{
    this.setState({
      modalStatus: 1
    })
  }
  showModifyCategory=(category)=>{
    this.category = category
    this.setState({
      modalStatus: 2
    })
  }
  componentWillMount(){
    this.columns = [
      {
        title: 'Category Name',
        dataIndex: 'name',
      },
      {
        title: 'Actions',
        width: 400,
        render: (category)=>(
          <span>
            <LinkButton  onClick= {()=>this.showModifyCategory(category)}>ModifyCategory</LinkButton>&nbsp;&nbsp;&nbsp;
            <LinkButton onClick={() => this.showSubCategories(category)}>ViewSubCategories</LinkButton>
          </span>
        )
      }
    ]
  }
  componentDidMount(){
    this.getCategories()
  }
  render() {
    const {categories,subCategories,parentId,parentName,modalStatus,loading} = this.state
    const category = this.category || {}
    const title = parentId==='0'?'CategoryClass1':(
      <span>
        <LinkButton onClick={()=>this.showCategories()}>CategoryClass1</LinkButton>
        <Icon type='arrow-right'/>&nbsp;&nbsp;
        <span>{parentName}</span>
      </span>
    )

    const extra = (
      <Button type='primary' onClick= {this.showAddCategory}>
        <Icon type='plus'/> Add
      </Button>
    )
    
    return (
      <Card title={title} extra={extra}>
        <Table
          bordered
          rowKey='_id'
          dataSource={parentId==='0'?categories:subCategories}
          columns={this.columns}
          loading={loading}
          pagination={{pageSize: 5, showQuickJumper: true, showSizeChanger: true}}
        />
        <Modal
          title="Add a category"
          visible={modalStatus===1}
          onOk={this.addaCategory}
          onCancel={()=>{
              this.setState({modalStatus:0})
              this.form.resetFields()
            }
          }
        >
          <AddForm categories={categories} parentId={parentId} setForm={form => this.form = form}/>
        </Modal>
        <Modal
          title="Modify a category"
          visible={modalStatus===2}
          onOk={this.modifyCategory}
          onCancel={()=>{
            this.setState({modalStatus:0})
            this.form.resetFields()
          }}
        >
         <ModifyForm categoryName={category.name} setForm={form=> this.form = form}/>
        </Modal>
      </Card>
    )
  }
}



